<template lang="pug">
    //- 人员监控 详情
    .monitor-details
      //- 面包屑
      .breadcrumb {{$store.state.user.province}} &gt; {{$store.state.user.cityname}} &gt;{{$store.state.user.county}} <span v-if="$store.state.classinfo">&gt; {{$store.state.classinfo.schoolname}} &gt; {{$store.state.classinfo.classname}} &gt; {{$store.state.user.username}}</span>
      //- 状态
      .status
        span(v-if="$route.query.type==1") 学生状态: <strong>{{info.stateName}}</strong>
        span(v-if="$route.query.type==2") 职工状态: <strong>{{info.stateName}}</strong>
        span(v-if="$route.query.type==3") 访客状态: <strong>{{info.stateName}}</strong>
        span <strong>{{info.proposal}}</strong>
        span 用户组织: {{basicInfo.classname}}
        span 组织负责人: {{basicInfo.headmaster}}
        span 电话: {{basicInfo.headmastermobile}}
      //- 学生个人信息
      .container(v-if="$route.query.type==1")
        .info-title 个人信息
        .info-container
          el-row
            el-col(:span="6") <span class="label">学校:</span> {{basicInfo.schoolname}}
            el-col(:span="6") <span class="label">分类:</span> 学生
            el-col(:span="6") <span class="label">ID:</span> {{basicInfo.schoolno}}
            el-col(:span="6") <span class="label">身份证号:</span> {{basicInfo.idcardno}}
          el-row
            el-col(:span="6") <span class="label">姓名:</span> {{basicInfo.name}}

            el-col(:span="6") <span class="label">学院/系: </span> {{basicInfo.collegename}}
            el-col(:span="6") <span class="label">联系电话:</span> {{basicInfo.phone}}
          el-row
            el-col(:span="6") <span class="label">班级:</span> {{basicInfo.classes}}
            el-col(:span="6") <span class="label">年龄:</span> {{basicInfo.age}}
            el-col(:span="6") <span class="label">班主任:</span> {{basicInfo.headmaster}}
            el-col(:span="6") <span class="label">家长:</span> {{basicInfo.parent}}
          el-row
            el-col(:span="6") <span class="label">班主任联系电话:</span> {{basicInfo.headmastermobile}}
            el-col(:span="12") <span class="label">家长联系电话:</span> {{basicInfo.parentmobile}}
          el-row
            el-col(:span="12") <span class="label">家庭住址:</span> {{basicInfo.address}}
      //- 职工个人信息
      .container(v-if="$route.query.type==2")
        .info-title 个人信息
        .info-container
          el-row
            el-col(:span="6") <span class="label">学校:</span> {{basicInfo.schoolname}}
            el-col(:span="6") <span class="label">分类:</span> 职工
            el-col(:span="6") <span class="label">ID:</span> {{basicInfo.schoolno}}
            el-col(:span="6") <span class="label">身份证号:</span> {{basicInfo.idcardno}}
          el-row
            el-col(:span="6") <span class="label">姓名:</span> {{basicInfo.name}}
            el-col(:span="6") <span class="label">性别:</span> {{basicInfo.sex==0?"女":"男"}}
            el-col(:span="6") <span class="label">联系电话:</span> {{basicInfo.phone}}
            el-col(:span="6") <span class="label">年龄:</span> {{basicInfo.age}}
          el-row
            el-col(:span="6") <span class="label">部门:</span> {{basicInfo.department}}
            el-col(:span="6") <span class="label">部门主管:</span> {{basicInfo.departmenthead}}
            el-col(:span="6") <span class="label">紧急联系人:</span> {{basicInfo.emergency}}
            el-col(:span="6") <span class="label">主管联系方式:</span> {{basicInfo.headmastermobile}}
          el-row
            el-col(:span="6") <span class="label">家长联系电话:</span> {{basicInfo.parentmobile}}
            el-col(:span="12") <span class="label">家庭住址:</span> {{basicInfo.address}}
      //- 访客个人信息
      .container(v-if="$route.query.type==3")
        .info-title
          .left 个人信息
          .right
              span(@click="fankeinfoSave") 保存
        .info-container
          el-row
            el-col(:span="12") <span class="label">学校:</span> {{basicInfo.schoolname}}
            el-col(:span="12") <span class="label">分类:</span> 访客
          el-row
            el-col(:span="12") <span class="label">身份证号:</span>
              el-input(v-model="basicInfo.idcardno" class="input-fangke")
            el-col(:span="12") <span class="label">性别:</span>
              el-radio(v-model="basicInfo.sex" label="2")  女
              el-radio(v-model="basicInfo.sex" label="1") 男
          el-row
            el-col(:span="12") <span class="label">姓名:</span>
              el-input(v-model="basicInfo.name" class="input-fangke")
            el-col(:span="12") <span class="label">年龄:</span>
              el-input(v-model="basicInfo.age" class="input-fangke")
          el-row
            el-col(:span="12") <span class="label">联系电话:</span>
              el-input(v-model="basicInfo.phone" class="input-fangke")
            el-col(:span="12") <span class="label">紧急联系人:</span>
              el-input(v-model="basicInfo.emergency" class="input-fangke")
          el-row
            el-col(:span="12") <span class="label">紧急联系人电话:</span>
              el-input(v-model="basicInfo.headmastermobile" class="input-fangke")
            el-col(:span="12") <span class="label">到访时间:</span>
              el-date-picker(v-model="basicInfo.createtime" type="datetime"  format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择时间")
          el-row
            el-col(:span="24") <span class="label">家庭住址:</span>
              el-input(v-model="basicInfo.address" class="input-fangke")
      //- 个人轨迹
      .container
        .info-title
          .left 个人轨迹
          .right
            span(class="add-track" @click="addGuiJi") 添加行程
            //- span 保存
        .info-container
          el-form(ref="form" :model="form")
            el-row
              el-col(:span="8")
                el-form-item(label="时间" label-width="40px")
                  el-date-picker(v-model="form.date" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期")
              el-col(:span="4")
                el-button(type="primary" icon="el-icon-search" @click="guijiList()") 搜索
          el-table(:data="guijitableData" height="250" style="width: 100%;")
            el-table-column(prop="createtime" label="时间" width="200")
            el-table-column(prop="address" label="地区")
            el-table-column(prop="riskname" label="地点风险")
            el-table-column(prop="vehicle" label="去程交通工具")
            el-table-column(prop="vehicleno" label="交通工具号")
            el-table-column(prop="isriskname" label="是否有风险")
            el-table-column(label="操作")
              template(slot-scope="scope")
                el-button(type="text" size="small" @click="editTrack(scope.row)") 编辑
                el-button(type="text" size="small" @click="deleteTrack(scope.row)") 删除
        el-pagination(layout="total, prev, pager, next" background
          @current-change="handleCurrentChange"
          :page-size="10"
          :total="total1"
          style="text-align:right;margin-top:20px;")
      //- 健康信息
      .container
        .info-title
          .left 健康信息
          .right
            span(@click="updatehealtyinfo") 保存
        .info-container
          el-form(ref="formHealthInfo" :model="formHealthInfo")
            el-row
              el-col(:span="7")
                el-form-item(label="核酸检测")
                  el-select(v-model="formHealthInfo.nucleic" placeholder="请选择核酸检测类型")
                    el-option(v-for="(item ,index) in nucleicList" :key="index" :label="item.name" :value="item.code")
              el-col(:span="7")
                el-form-item(label="健康码")
                  el-select(v-model="formHealthInfo.healthcode" placeholder="请选择健康码类型")
                    el-option(v-for="(item ,index) in healthcodeList" :key="index" :label="item.name" :value="item.code")
              el-col(:span="7")
                el-form-item(label="状态")
                  el-select(v-model="formHealthInfo.status" placeholder="请选择状态类型" @change='statueSel')
                    el-option(v-for="(item ,index) in statusList" :key="index" :label="item.name" :value="item.code")
            el-form-item(label="交接时间" v-if="flag1")
              el-date-picker(v-model="formHealthInfo.handovertime" type="datetime"  format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择时间")
            el-form-item(label="医方人员"  v-if="flag1")
              el-input(v-model="formHealthInfo.medicalstaff" placeholder="请输入医方人员")
            el-form-item(label="医方联系方式"  v-if="flag1")
              el-input(v-model="formHealthInfo.medicalstaffphone" placeholder="请输入医方人员")
            el-form-item(label="车牌号"  v-if="flag1")
              el-input(v-model="formHealthInfo.carnumber" placeholder="请输入车牌号")
            el-form-item(label="交接去向"  v-if="flag1")
              el-input(v-model="formHealthInfo.handovertrend" placeholder="请输入交接去向")
            el-form-item(label="隔离时间" v-if="flag2")
              el-date-picker(v-model="formHealthInfo.isolationtime" type="datetime"  format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择时间")
            el-form-item(label="隔离地址" v-if="flag2")
              el-input(v-model="formHealthInfo.isolationaddress" placeholder="请输入交隔离地址")
            el-form-item(label="是否发放体温贴" v-if="flag2||flag1")
              el-radio(v-model="formHealthInfo.temperaturetype" label="1")  是
              el-radio(v-model="formHealthInfo.temperaturetype" label="0") 否
            el-form-item(label="体温贴编码" v-if="flag2||flag1")
              el-input(v-model="formHealthInfo.temperaturecode" placeholder="请输入体温贴编码")
            el-form-item(v-if="flag3")
              p 注：疑似病例：是病例在发病前的14天曾经有过中高风险的旅行史，或者是在发病前14天曾经接触过有呼吸道症状等可疑症状的病例
            el-form-item(label="说明")
              el-input(type="textarea" v-model="formHealthInfo.explains" placeholder="请输入说明" :autosize="{ minRows: 6, maxRows: 6}")
            <!--el-form-item(label="附件")-->
              <!--el-row-->
                <!--el-col(:span="5")-->
                  <!--.upload-->
                    <!--.upload-top <img :src="formHealthInfo.enclosure1" alt="JPG文件">-->
                    <!--.upload-title {{basicInfo.name}}医疗证明-->
                <!--el-col(:span="5")-->
                  <!--.upload-->
                    <!--.upload-top <img :src="formHealthInfo.enclosure2" alt="JPG文件">-->
                    <!--.upload-title {{basicInfo.name}}核酸检测证明-->
                <!--el-col(:span="5")-->
                  <!--.upload-->
                    <!--.upload-top <img :src="formHealthInfo.enclosure3" alt="JPG文件">-->
                    <!--.upload-title {{basicInfo.name}}家长承诺书-->
            .fr
              .label 附件
              .f1.fr
                .pic-item.fajc.a(@click="() => {health.pic.mtype = 1;$refs.file.click() }")
                  span(v-if="!health.pic.pics[1]") 上传医疗证明
                  img(v-else :src="health.pic.pics[1]" title="医疗证明")
                .pic-item.fajc.a.ml-20(@click="() => { health.pic.mtype = 2;$refs.file.click() }")
                  span(v-if="!health.pic.pics[2]") 上传核酸检测证明
                  img(v-else :src="health.pic.pics[2]" title="核酸检测证明")
                .pic-item.fajc.a.ml-20(@click="() => { health.pic.mtype = 3;$refs.file.click() }")
                  span(v-if="!health.pic.pics[2]") 上传家长承诺书
                  img(v-else :src="health.pic.pics[2]" title="核酸检测证明")
                input(type="file" accept="image/*" style="display: none;" ref="file" @change="changeFile")
      //- 个人体温记录
      .container
        .info-title
          .left 个人体温记录
          .right
            //- span 保存
        .info-container
          el-form
            el-row
              el-col(:span="8")
                el-form-item(label="时间" label-width="40px")
                  el-date-picker(v-model="tiwendate" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期")
              el-col(:span="6")
                el-form-item(label="地点" label-width="40px")
                  el-input(v-model="tiwenaddress" placeholder="请输入地点")
              el-col(:span="4")
                el-button(type="primary" icon="el-icon-search" @click="gettiwenRe") 搜索
              el-col.heat(:span="6")
                a(:href="`http://wcxt.bjyulinkeji.com/health/getRecord/dataexport?personid=${$route.query.personId}`") 导出
                span(@click="addTiwenList") 添加
          el-table(:data="tableData" height="250" style="width: 100%;")
            el-table-column(label="分类")
              template(slot-scope="scope")
                el-button(type="text" size="small") {{$route.query.type==1?'学生':$route.query.type==2?'职工':'访客'}}
            el-table-column(prop="personid" label="学生ID" v-if="$route.query.type==1")
            el-table-column(prop="personid" label="职工ID" v-if="$route.query.type==2")
            el-table-column(prop="personid" label="访客ID" v-if="$route.query.type==3")
            el-table-column(prop="name" label="名字")
            el-table-column(prop="tp" label="最新温测")
            el-table-column(prop="createtime" label="测温时间")
            el-table-column(prop="address" label="地点")
            el-table-column(label="操作")
              template(slot-scope="scope")
                el-button(type="text" size="small" @click="updataTiwen(scope.row)") 编辑
                el-button(type="text" size="small" @click="deleteTiwen(scope.row)") 删除
        el-pagination(layout="total, prev, pager, next" background
          @current-change="handleCurrentChange1"
          :page-size="10"
          :total="total2"
          style="text-align:right;margin-top:20px;")
</template>

<script>
import merge from 'webpack-merge'
import axios from 'axios'

class FormHealthInfo {
  constructor (item = {}) {
    this.carnumber = item.carnumber || ""
    this.cityno = item.cityno || ""
    this.classno = item.classno || ""
    this.createtime = item.createtime || null
    this.enclosure1 = item.enclosure1 || null
    this.enclosure2 = item.enclosure2 || null
    this.enclosure3 = item.enclosure3 || null
    this.explains = item.explains || ""
    this.handovertime = item.handovertime || null
    this.handovertrend = item.handovertrend || ""
    this.healthcode = item.healthcode || ""
    this.id = item.id || 0
    this.isolationaddress = item.isolationaddress || ""
    this.isolationtime = item.isolationtime || null
    this.medicalstaff = item.medicalstaff || ""
    this.medicalstaffphone = item.medicalstaffphone || ""
    this.nucleic = item.nucleic || ""
    this.personid = item.personid || ""
    this.provinceno = item.provinceno || ""
    this.schoollevel = item.schoollevel || ""
    this.schoolno = item.schoolno || ""
    this.status = item.status || ""
    this.type = item.type || 3
    this.temperaturetype = item.temperaturetype || ''
    this.temperaturecode = item.temperaturecode || ''
  }
}

class BasicInfo {
  constructor (item = {}) {
    this.address = item.address || ""
    this.age = item.age || ''
    this.carnumber = item.carnumber || null
    this.cityname = item.cityname || ""
    this.cityno = item.cityno || 0
    this.classes = item.classes || ""
    this.classname = item.classname || ""
    this.collegename = item.collegename || ""
    this.countname = item.countname || ""
    this.countyno = item.countyno || 0
    this.createtime = item.createtime || null
    this.department = item.department || ""
    this.departmenthead = item.departmenthead || ""
    this.emergency = item.emergency || ""
    this.handovertime = item.handovertime || null
    this.handovertrend = item.handovertrend || null
    this.headmaster = item.headmaster || ""
    this.headmastermobile = item.headmastermobile || ""
    this.id = item.id || 0
    this.idcardno = item.idcardno || ""
    this.isolationaddress = item.isolationaddress || null
    this.isolationtime = item.isolationtime || null
    this.medicalstaff = item.medicalstaff || null
    this.medicalstaffphone = item.medicalstaffphone || null
    this.name = item.name || ""
    this.parent = item.parent || ""
    this.parentmobile = item.parentmobile || ""
    this.personid = item.personid || ""
    this.personstate = item.personstate || ""
    this.phone = item.phone || ""
    this.provincename = item.provincename || ""
    this.provinceno = item.provinceno || 0
    this.school = item.school || ""
    this.schoolgrade = item.schoolgrade || ""
    this.schoolname = item.schoolname || ""
    this.schoolno = item.schoolno || 0
    this.sex = item.sex || "1"
    this.tp = item.tp || ""
    this.type = item.type || "3"
  }
}

export default {
  name: "monitorDetails",
  props: {},
  data() {
    return {
      info: {
        proposal: '',
        stateName: ''
      },
      basicInfo: {},
      tiwenaddress: '',
      tiwendate: '',
      form: {
        date: null
      },
      guijitableData: [
      ],
      nucleicList: [{ code: '1', name: '不涉及' }, { code: '2', name: '阳性' }, { code: '3', name: '阴性' }, { code: '4', name: '阴性证明' }, { code: '5', name: '检测中' }],
      healthcodeList: [{ code: '1', name: '不涉及' }, { code: '0', name: '绿码' }, { code: '2', name: '黄码' }, { code: '3', name: '红码' }],
      statusList: [{ code: '0', name: '正常' }, { code: '2', name: '留校观察' }, { code: '17', name: '医疗交接' }, { code: '7', name: '居家隔离' }, { code: '5', name: '医疗隔离' }, { code: '18', name: '复课申请' }, { code: '11', name: '返校复课' }, { code: '14', name: '疑似患者' }, { code: '6', name: '返校复工' }],
      tableData: [],
      formHealthInfo: new FormHealthInfo(),
      total1: 0,
      total2: 0,
      pagecurrent1: 1,
      pagecurrent: 1,
      flag1: false,
      flag2: false,
      flag3: false,
      // 文件上传
      health: {
        pic: {
          files: {
            1: null,
            2: null,
            3: null
          },
          pics: {
            1: null,
            2: null,
            3: null
          },
          mtype: 1
        }
      }
    }
  },
  computed: {},
  mounted() {
    if (this.$route.query.personId) {
      this.guijiList()
      this.titleInfo()
      this.gethealtyinfo()
      this.gettiwenRe()
    }
    this.getPeopleInfo()
  },
  watch: {},
  methods: {
    //头部信息
    titleInfo() {
      this.$http('health/tprecord/getState', {
        personid: this.$route.query.personId
      }, 'POST').then(res => {
        this.info = res.data
      })
    },
    //个人基本信息
    getPeopleInfo() {
      this.$http('personnel/details/form', {
        personid: this.$route.query.personId
      }, 'POST').then(res => {
        if (!this.$route.query.personId) {
          this.$router.push({
            query: merge(this.$route.query, { 'personId': res.data.personid })
          })
          this.getPeopleInfo()
          return
        }
        this.basicInfo = new BasicInfo(res.data)
        this.$store.commit('userInfo', this.basicInfo)
        console.log(res.data)
      })
    },
    //轨迹查询
    guijiList(pagecurrent = 1) {
      console.log(this.form.date)
      this.$http('track/getmanagelist', {
        personid: this.$route.query.personId,
        btime: this.form.date ? this.form.date[0] : '',
        etime: this.form.date ? this.form.date[1] : '',
        pagesize: 10,
        pagecurrent: pagecurrent
      }, 'POST').then(res => {
        this.guijitableData = res.data.records
        this.total1 = res.data.total
        this.guijitableData.forEach((item) => {
          item.isriskname = item.isrisk == 0 ? '无风险' : '有风险'
          item.riskname = item.isrisk == 1 ? '高风险' : item.isrisk == 2 ? '中风险' : '低风险'
        })
      })
    },
    handleCurrentChange(val) {
      this.guijiList(val)
    },
    addGuiJi() {
      this.$router.push({
        path: '/editInfo',
        query: {
          personId: this.$route.query.personId,
          type: this.$route.query.type
        }
      })
    },
    // 删除轨迹
    deleteTrack(item) {
      this.$http('track/deleteid', {
        id: item.id
      }, 'POST').then(res => {
        this.guijiList()
      })
    },
    // 编辑轨迹
    editTrack(item) {
      this.$store.commit('setGuijiItem', item)
      this.$router.push({
        path: '/editInfo',
        query: {
          personId: this.$route.query.personId,
          type: this.$route.query.type,
          id: item.id
        }
      })
    },
    // 获取健康信息
    gethealtyinfo() {
      this.$http('health/healthinfo/getHealthInfo', {
        personid: this.$route.query.personId,
        type: this.$route.query.type
      }, 'POST').then(res => {
        this.formHealthInfo = new FormHealthInfo(res.data[0])
        this.statueSel(this.formHealthInfo.status)

        const data = res.data[0] || {}
        this.health.pic.pics[1] = data.enclosure1
        this.health.pic.pics[2] = data.enclosure2
        this.health.pic.pics[3] = data.enclosure3
      })
    },
    // 修改健康信息
    updatehealtyinfo(item) {
      this.submitHealth().then(
        () => {
          return this.$http('health/healthinfo/saveOrUpdate', {

            ...this.formHealthInfo,
            personid: this.$route.query.personId,
            type: this.$route.query.type,
          }, 'POST')
        }
      ).then(res => {
        this.$notify.success(res.message)
        this.gethealtyinfo()
      })
    },
    // 获取体温测量记录
    gettiwenRe (refresh) {
      if (refresh) this.pagecurrent = 1
      if (this.tiwendate) {
        console.log('体温时间范围', this.tiwendate)
        var btime = this.tiwendate[0]
        var etime = this.tiwendate[1]
      }
      this.$http('health/tprecord/getRecordPage', {
        personid: this.$route.query.personId,
        type: this.$route.query.type,
        btime,
        etime,
        address: this.tiwenaddress,
        pagecurrent: this.pagecurrent,
        pagesize: 10
      }, 'POST').then(res => {
        this.$notify.success(res.message)
        this.tableData = res.data.records
        this.total2 = res.data.total
      })
    },
    handleCurrentChange1(val) {
      this.pagecurrent = val
      this.gettiwenRe()
    },
    //添加体温
    addTiwenList() {
      this.$router.push({
        path: '/editTiWenInfo',
        query: {
          personId: this.$route.query.personId,
          type: this.$route.query.type
        }
      })
    },
    // 编辑体温
    updataTiwen(item) {
      this.$store.commit('setGuijiItem', item)
      this.$router.push({
        path: '/editTiWenInfo',
        query: {
          personId: this.$route.query.personId,
          type: this.$route.query.type,
          id: item.id
        }
      })
    },
    // 删除体温
    deleteTiwen(item) {
      this.$http('health/tprecord/delete', {
        id: item.id
      }, 'POST').then(res => {
        this.gettiwenRe()
      })
    },
    // 访客信息保存
    fankeinfoSave() {
      if (this.$route.query.type === '3') {
        const keys = ['idcardno', 'sex', 'name', 'age', 'phone', 'emergency', 'headmastermobile', 'createtime', 'address']
        for (let i = 0; i < keys.length; i++) {
          if (!this.basicInfo[keys[i]]) {
            this.$notify.warning('请填写完整的个人信息')
            return
          }
        }
      }

      this.basicInfo.age = this.basicInfo.age * 1
      this.basicInfo.personid = this.$route.query.personId
      this.$http('/personnel/saveOrUpdate', this.basicInfo, 'POST').then(res => {
        this.$notify.success(res.message)
        this.$store.commit('userInfo', this.basicInfo)
      })
    },
    statueSel(val) {
      if (val == 17) {
        this.flag1 = true
        this.flag2 = this.flag3 = false
      } else if (val == 7 || val == 5) {
        this.flag2 = true
        this.flag1 = this.flag3 = false
      } else if (val == 14) {
        this.flag3 = true
        this.flag1 = this.flag2 = false
      } else {
        this.flag1 = this.flag2 = this.flag3 = false
      }
    },

    // 文件上传相关方法
    changeFile (e) {
      const { pic } = this.health
      pic.files[pic.mtype] = e.target.files[0]
      this.readFile(e.target.files[0])
    },
    readFile (file) {
      const { pic } = this.health
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = () => {
        pic.pics[pic.mtype] = reader.result
        this.$refs.file.value = ''
      }
    },
    submitHealth () {
      const files = []
      for (let k in this.health.pic.files) {
        if (this.health.pic.files[k]) {
          const fd = new FormData()
          fd.append('mtype', k)
          fd.append('personid', this.$route.query.personId)
          fd.append('file', this.health.pic.files[k])
          files.push(fd)
        }
      }
      return Promise.all(files.map(v => axios.post('/api/medical/certificate', v)))
    }
  },
  components: {}
};
</script>

<style scoped lang="less">
div {
	box-sizing: border-box;
}

.monitor-details {
	color: #fff;
	font-size: 14px;
	font-weight: 700;

  .label {display: inline-block;width: 120px;}
	.status {
		margin-top: 14px;
		span {
			margin-right: 40px;
			strong {
				color: yellowgreen;
			}
		}
	}

	.container {
		margin-top: 40px;
		.info-title {
			display: flex;
			justify-content: space-between;
			font-size: 16px;
			.right {
				font-size: 14px;
				span {
					cursor: pointer;
				}
				.add-track {
					color: #202ab0;
					margin-right: 20px;
				}
			}
		}
		.info-container {
			width: 100%;
			margin-top: 20px;
			background: #000418;
			border-radius: 6px;
			padding: 20px 20px 60px;

			.el-row {
				margin-bottom: 20px;
				&:last-child {
					margin-bottom: 0;
				}
			}

			/deep/ .el-form-item__label {
				color: #fff;
			}

			.el-input {
				width: 193px;
			}
			.el-table {
				background-color: #000;
			}
			/deep/ .el-table thead,
			/deep/ .el-table tbody {
				color: #fff;
			}
			/deep/ .el-table th,
			/deep/ .el-table tr,
			/deep/ .el-table__row {
				background-color: #000;
			}

			/deep/ .el-table td,
			.el-table th.is-leaf {
				border: none;
			}

			/deep/ .el-table--enable-row-hover .el-table__body tr:hover > td {
				background: none;
			}
			/deep/ .el-range-editor.el-input__inner {
				width: 90%;
			}
			/deep/ .el-date-editor .el-range-separator,
			/deep/ .el-range-editor.el-input__inner,
			/deep/ .el-range-editor .el-range-input {
				background: none;
				color: #fff;
			}

			.upload {
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			.upload-top {
				width: 80px;
				line-height: 100px;
				border-radius: 6px;
				border: 1px solid #fff;
				text-align: center;
				cursor: pointer;
			}

			.heat {
				line-height: 40px;
				text-align: right;
				color: #202ab0;
				span {
					cursor: pointer;
				}
				a {
          color: #202ab0;
					margin-right: 20px;
				}
			}
		}
	}
}
.monitor-details .container .info-container .el-input.input-fangke {
	width: 70%;
}
.monitor-details
	.container
	.info-container
	.el-input.input-fangke
	.el-input__inner {
	height: 30px;
	line-height: 30px;
}

.pic-item {width: 280px;height: 210px;border: 1px dashed rgba(255, 255, 255, .3);border-radius: 4px;
  span {opacity: .3;}
  img {max-width: 270px;max-height: 200px;}
  &:hover {border: 1px dashed rgba(255, 255, 255, 1);
    span{opacity: 1;}
  }
}
</style>
